<template>
  <el-col :span="16">
    <div class="order-box">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>账户信息</span>
            </div>
            <el-form-item label="手机号">
              {{info.account_info.mobile}}
            </el-form-item>
            <el-form-item label="注册时间">
              {{info.account_info.register_time | parseTime('{y}-{m}-{d} {h}:{i}')}}
            </el-form-item>
            <el-form-item label="注册IP" v-if="info.account_info.register_ip !== null">
              {{info.account_info.register_ip}}（{{info.account_info.register_ip_city}}）
            </el-form-item>
            <el-form-item label="注册IP" v-else>
              无
            </el-form-item>
            <el-form-item label="不良记录">
              {{info.account_info.bad_list | toString}} <router-link :to="'/order/badlogs/'+param.id">查看全部</router-link>
            </el-form-item>
          </el-card>
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>保障人信息</span>
            </div>
            <el-form-item label="姓名">
              {{info.ensure_info.name}}
            </el-form-item>
            <el-form-item label="基础信息">
              {{info.ensure_info.sex}}（{{info.ensure_info.age}}岁）
            </el-form-item>
            <el-form-item label="身份证号">
              {{info.ensure_info.identify}}
            </el-form-item>
            <el-form-item label="民族">
              {{info.ensure_info.nation}}
            </el-form-item>
            <el-form-item label="居住地">
              {{info.ensure_info.dist}}
            </el-form-item>
            <el-form-item label="详细地址">
              {{info.ensure_info.address}}
            </el-form-item>
            <el-form-item label="健康告知问卷">
              <router-link :to="'/order/healthQuestion/'+info.order_info.qid" v-if="info.order_info.qid !== '' && info.order_info.qid !== undefined && info.order_info.qid !== '0'">查看</router-link>
              <span v-else>无</span>
            </el-form-item>
          </el-card>
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>监护人信息</span>
            </div>
            <el-form-item label="姓名">
            {{info.guarder_info.name}}
            </el-form-item>
            <el-form-item label="基础信息">
              {{info.guarder_info.sex}}（{{info.guarder_info.age}}岁）
            </el-form-item>
            <el-form-item label="身份证号">
            {{info.guarder_info.identify}}
            </el-form-item>
            <el-form-item label="与保障人关系">
              {{info.ensure_info.relation}}
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12" class="right">
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>订单信息</span>
            </div>
            <el-form-item label="订单编号">
              {{info.order_info.order_num}}
            </el-form-item>
            <el-form-item label="下单时间">
              {{info.order_info.create_time|parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-form-item>
            <el-form-item label="订单状态">
            {{info.order_info.status_text}}
            </el-form-item>
            <el-form-item label="产品编号">
            {{info.order_info.plan_code}}
            </el-form-item>
            <el-form-item label="产品名称">
            {{info.order_info.product_name}}
            </el-form-item>
            <el-form-item label="购买IP">
            {{info.order_info.order_ip}}({{info.order_info.order_ip_city}})
            </el-form-item>
          </el-card>
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>支付信息</span>
            </div>
            <el-form-item label="缴费方式">
              {{info.pay_info.pay_type_text}}
            </el-form-item>
            <el-form-item label="价格类型">
              {{info.pay_info.favor_type_text}}
            </el-form-item>
            <el-form-item label="支付时间">
              {{info.pay_info.pay_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-form-item>
            <el-form-item label="订单总额">
              {{info.pay_info.plan_price}}
            </el-form-item>
            <el-form-item label="优惠金额">
              {{info.pay_info.coupon_price === 0 ? '无' : info.pay_info.coupon_price + '（优惠码：'+ info.pay_info.coupon_code +'）'}}
            </el-form-item>
            <el-form-item label="已支付金额">
              {{info.pay_info.payed_price}}
            </el-form-item>
          </el-card>
          <el-card class="box-card order-card">
            <div slot="header" class="clearfix">
              <svg-icon icon-class="ds-person" /><span>凭证信息</span>
            </div>
            <template v-for="(item,index) in info.ceritify_info">
              <el-form-item :key="index" :label="item.name">
                <a @click="showImg(index)">查看</a>
              </el-form-item>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog width="60%" :visible.sync="dialogFormVisible" custom-class="order-dialog" :show-close="false" @close="resetTemp">
      <el-carousel :interval="5000" :autoplay="false" arrow="always" height="500px" trigger="click" ref="swiper" @change="sign()">
        <el-carousel-item v-for="(item, index) in imgs.pic" :key="index">
          <div class="img-border">
            <img :src="item" height="100%" class="carousel-img" v-on:mousewheel="mouseSize()" v-on:mousedown="drag(index)" draggable="false"/>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="img-button">
        <div class="img-button-item" @click="rotate()">
          <svg-icon icon-class="ds-img-zhuan" />
          <p>旋转</p>
        </div>
        <div class="img-button-item" @click="big()">
          <svg-icon icon-class="ds-img-big" />
          <p>放大</p>
        </div>
        <div class="img-button-item" @click="small()">
          <svg-icon icon-class="ds-img-small" />
          <p>缩小</p>
        </div>
        <a class="img-button-item" :href="downloadVal" :download="downloadVal">
          <svg-icon icon-class="ds-img-download" />
          <p>下载</p>
        </a>
      </div>
    </el-dialog>
  </el-col>
</template>

<style scoped>
  .img-border {
    width: 100%;
    height: 100%;
  }
  .carousel-img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
  }
  .img-button {
    height: 60px;
    line-height: 60px;
    background-color: #fff;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .img-button-item {
    display: inline-block;
    margin: 10px 20px 0 20px;
    cursor: pointer;
    line-height: 24px;
  }
  .img-button-item svg {
    font-size: 18px;
  }
  .img-button-item p {
    margin: 0px;
    font-size: 12px;
  }
  .img-button-item:hover {
    color: #3fb2fe;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item {
    background-color: #8c8c8c;
  }
  .is-animating {
    text-align: center;
  }
  .order-box {
    background-color: #f5f5f5;
    padding: 20px;
    height: 1130px;
    overflow: auto;
  }
	.el-form-item__content a {
		color: #45b9fe;
		float: right;
	}
  .el-form-item__content a:hover {
    text-decoration: underline;
  }
  .el-card .el-form-item {
    margin-bottom: 0px;
  }
  .el-col .el-card__header {
  	border-bottom:0 !important;
  }
  .el-form-item--medium {
  	border-bottom: 1px solid #ebeef5;
  }
  .el-card__header svg{
  	display: none;
  }
  .el-card__body {
  	padding: 0 20px!important;
  }
  .box-card {
  	margin-top: 20px;
  }
  .el-col > div.el-card:nth-child(1){
  	border-left: 4px solid #3fb2fe;
  }
  .el-col > div.el-card:nth-child(2){
  	border-left: 4px solid #a1c14c;
  }
  .el-col > div.el-card:nth-child(3){
  	border-left: 4px solid #ffa31f;
  }
/*   .other .el-form-item__label{
  	line-height: 1.5;
  } */
  .right > div.el-card:nth-child(1){
  	border-left: 4px solid #d996ff;
  }
  .right > div.el-card:nth-child(2){
  	border-left: 4px solid #ff7357;
  }
  .right > div.el-card:nth-child(3){
  	border-left: 4px solid #29deff;
  }
  .el-form-item__content{
  	word-break: break-all;
    text-indent: -50px;
  }
  .el-form-item {
  	padding: 10px 0;
  }
  .el-card__header span {
    color: #858585;
  	font-weight: bold;
  }
  .el-card__body > div:last-child{
  	border:none;
  }
  .box-card {
    margin-top: 0px;
    margin-bottom: 20px;
  }
</style>
<script>
export default {
  props: {
    info: Object
  },
  data() {
    return {
      dialogFormVisible: false,
      param: this.$route.params,
      downloadVal: '',
      rotateVal: [],
      imgVal: [],
      imgs: []
    }
  },
  methods: {
    showImg(id) {
      this.imgs = this.info.ceritify_info[id]
      this.dialogFormVisible = true
      document.getElementsByClassName('order-dialog')[0].style.marginTop = '4vh'
      if (this.$refs['swiper'] !== undefined) {
        this.$refs['swiper'].setActiveItem(0)
      }
    },
    rotate() { // 旋转
      const ind = this.$refs['swiper'].activeIndex
      this.rotateVal[ind] = this.rotateVal[ind] === undefined ? 0 : this.rotateVal[ind]
      this.rotateVal[ind] = (this.rotateVal[ind] - 90) % 360
      this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].style.transform = 'rotate(' + this.rotateVal[ind] + 'deg)'
    },
    mouseSize() {
      const obj = this
      document.onmousewheel = function(e) {
        e.deltaY > 0 ? obj.small('1') : obj.big('1')
      }
    },
    big(type) { // 放大
      const ind = this.$refs['swiper'].activeIndex
      // var elBox = document.getElementsByClassName('order-dialog')[0] // 弹框
      var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
      if (this.imgVal[ind] <= 300 || this.imgVal[ind] === undefined) { // 最大缩放300%
        this.imgVal[ind] = this.imgVal[ind] === undefined ? 100 : this.imgVal[ind]
        this.imgVal[ind] = type === '1' ? this.imgVal[ind] + 5 : this.imgVal[ind] + 20 // 判断是否是鼠标滑动
        el.style.height = this.imgVal[ind] + '%'
        el.style.left = 0
        // el.style.left = (elBox.offsetWidth - el.offsetWidth) / 2 + 'px'
        el.style.top = (500 - el.offsetHeight) / 2 + 'px'
      }
    },
    small(type) { // 缩小
      const ind = this.$refs['swiper'].activeIndex
      // var elBox = document.getElementsByClassName('order-dialog')[0] // 弹框
      var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
      if (this.imgVal[ind] >= 40 || this.imgVal[ind] === undefined) { // 最小缩放20%
        this.imgVal[ind] = this.imgVal[ind] === undefined ? 100 : this.imgVal[ind]
        this.imgVal[ind] = type === '1' ? this.imgVal[ind] - 5 : this.imgVal[ind] - 20 // 判断是否是鼠标滑动
        el.style.height = this.imgVal[ind] + '%'
        el.style.left = 0
        // el.style.left = (elBox.offsetWidth - el.offsetWidth) / 2 + 'px'
        el.style.top = (500 - el.offsetHeight) / 2 + 'px'
      }
    },
    drag(ind) { // 拖动事件
      var el = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0]
      var style = el.style
      document.onmousemove = function(e) {
        var x = e.movementX
        var y = e.movementY
        style.left = style.left === '' ? 0 : style.left
        style.top = style.top === '' ? 0 : style.top
        var left = parseInt(style.left) + x
        var top = parseInt(style.top) + y
        var minLeft = -el.offsetWidth
        var maxLeft = el.offsetWidth
        var minTop = 20 - el.offsetHeight
        var maxTop = 480
        // 如果在限制拖动范围之内
        if (left > minLeft && left < maxLeft) {
          style.left = left + 'px'
        }
        if (top > minTop && top < maxTop) {
          style.top = top + 'px'
        }
      }
      document.onmouseup = function() {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    download() {
      const ind = this.$refs['swiper'].activeIndex
      const src = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].src
      window.open(src)
    },
    sign() {
      const ind = this.$refs['swiper'].activeIndex
      this.downloadVal = this.$refs['swiper'].$children[ind].$el.getElementsByTagName('img')[0].src
    },
    resetTemp() { // 关闭时初始化图片数据
      this.rotateVal = []
      this.imgVal = []
      var img = document.getElementsByClassName('carousel-img')
      for (var k = 0; k < img.length; k++) {
        img[k].style.transform = 'rotate(0deg)'
        img[k].style.top = ''
        img[k].style.left = ''
        img[k].style.height = '100%'
      }
    }
  }
}
</script>
